/******************** 变量 ********************/
$lv-table-header-font-size: $font-size-sm !default;
$lv-table-header-light-height: $line-height-coeff-minor !default;
$lv-table-unfold-space: $padding-sm 0.72rem !default;
$lv-table-empty-padding: 0.64rem !default;

$lv-table-header-color: $text-color-secondary !default;
$lv-table-header-border-color: $lv-table-border-color !default;
$lv-table-header-icon-color: $icon-color-secondary !default;
$lv-table-header-scrollbar-color: transparent !default;

$lv-table-filter-item-bg-color-hover: $item-background-hover !default;
$lv-table-filter-item-bg-color-active: $item-background-active !default;

$lv-table-body-background-color: transparent !default;
$lv-table-td-bg-color-hover: $item-background-hover !default;
$lv-table-td-bg-color-active: $item-background-active !default;
$lv-table-unfold-bg-color: transparent !default;
$lv-table-unfold-td-bg-color: transparent !default;

$lv-table-stripe-bg-color: #f7faff !default;

$lv-table-box-shadow-light: 0.04rem 0 0.08rem -0.03rem rgba(#1a1a1a, 0.1) !default;
$lv-table-collapse-row-shadow: 0 0.02rem 0.08rem 0.01rem rgba(#999999, 0.5) !default;

$lv-tree-table-first-cell-space: 0.4rem;
// TODO: 整体换肤功能，目前修改部分样式使用变量

/******************** 组件 ********************/
.lv-table {
  color: $text-color;
  font-weight: $font-weight-regular;
  font-size: $font-size-base;
  line-height: $line-height-coeff;
  display: block;

  table {
    width: 100%;
    text-align: left;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
  }

  col.lv-colgroup-auto {
    min-width: 0.96rem;
  }

  .lv-table-td {
    color: $text-color;

    .lv-table-operation-icon {
      flex-shrink: 0;
      @include icon-size;

      color: $icon-color;
      vertical-align: middle;
      cursor: pointer;

      &.lv-table-toggle-expanded {
        margin-right: $margin-sm;
      }
    }

    // 折叠展开按钮
    .lv-table-toggle-unfold {
      -webkit-transition: all $motion-duration-sm $motion-func-ease;
      transition: all $motion-duration-sm $motion-func-ease;

      &.triangle-up {
        transform: rotate(0deg);
      }

      &.triangle-down {
        transform: rotate(90deg);
      }

      // 树表使用
      + .lv-cell-checkbox,
      + lv-tooltip {
        margin-left: $margin-sm;
      }
    }
  }

  .lv-table-tbody,
  &.lv-table-stripe .lv-table-tbody {
    > tr.lv-table-row:not(.lv-table-unfold-row):not(.lv-table-collapse-row):hover > td {
      background-color: $lv-table-td-bg-color-hover;

      @include motion-bg;
    }

    // 2.0中两个样式不一致，3.0保留原有样式类，避免破坏性变更，后续可考虑使用升级工具匹配
    .lv-table-row-highlight > td,
    .lv-table-cell-highlight,
    .lv-table-row-active > td,
    .lv-table-cell-active {
      background-color: $lv-table-td-bg-color-active;
    }
  }

  // 展开
  .lv-table-unfold-main {
    width: 100%;
    padding: $lv-table-unfold-space;
    background-color: $lv-table-unfold-bg-color;

    .lv-table .lv-table-row > td {
      background-color: $lv-table-unfold-td-bg-color;
    }

    .lv-table-thead > tr > th {
      background-color: $lv-table-unfold-table-header-bg-color;
    }

    .lv-paginator {
      padding-bottom: 0;
    }
  }

  // 复杂编辑
  .lv-table-edit-main {
    flex: 1;
    padding: $padding-md;
    background-color: $lv-table-unfold-bg-color;
  }

  .lv-table-collapse-row {
    position: relative;
    box-shadow: $lv-table-collapse-row-shadow;
  }

  // 滚动
  .lv-table-scroll {
    .lv-table-header {
      overflow-x: hidden;
      background-color: $lv-table-header-bg-color;
      @include component-scroll-lg;

      scrollbar-color: $lv-table-header-scrollbar-color $lv-table-header-scrollbar-color;
      -ms-scrollbar-track-color: $lv-table-header-scrollbar-color;
      scrollbar-track-color: $lv-table-header-scrollbar-color;
    }

    .lv-table-body {
      @include component-scroll-lg;
    }

    &.lv-table-vertical-scroll {
      .lv-table-header {
        border-top: $border-width-base $border-style-base $lv-table-header-border-color;
        border-bottom: $border-width-base $border-style-base $lv-table-header-border-color;
      }

      .lv-table-body {
        border-top: none;
      }

      .lv-table-tbody {
        > tr {
          > td {
            border-top: none;
          }
        }
      }
    }
  }

  .lv-table-placeholder {
    color: $text-color;
    text-align: center;
  }
}

.lv-table-body {
  position: relative;
  border-top: $border-width-base $border-style-base $lv-table-header-border-color;
}

// 表头
.lv-table-thead {
  color: $lv-table-header-color;
  font-size: $lv-table-header-font-size;
  line-height: $lv-table-header-light-height;

  > tr {
    background-color: transparent;

    > th {
      height: $height-base;
      padding: 0 $padding-sm;
      font-weight: $font-weight-regular;
      background-color: $lv-table-header-bg-color;
      background-clip: padding-box;

      @include motion-bg;

      &:first-child {
        padding-left: $padding-md;
      }

      &:last-child {
        padding-right: $padding-md;

        &:not(.lv-table-deliver) .lv-table-th-deliver {
          display: none;
        }
      }

      &.lv-table-column-has-sorters {
        &:hover {
          background-color: $lv-table-header-bg-color-hover;
          cursor: pointer;
        }
      }

      &.lv-table-column-has-selection,
      &.lv-table-column-has-folder {
        .lv-table-th-deliver {
          display: none;
        }
      }
    }
  }
}

// th
.lv-table-th {
  position: relative;

  .lv-table-th-container {
    .lv-table-th-content {
      flex: 1 1 auto;
    }
  }

  .lv-table-th-container {
    justify-content: space-between;
  }

  &-center {
    .lv-table-th-container {
      .lv-table-cell-content {
        text-align: center;
      }
    }
  }

  &-right {
    .lv-table-th-container {
      .lv-table-cell-content {
        text-align: right;
      }
    }
  }

  &.lv-table-column-has-sorters {
    &.lv-table-column-has-sorters {
      .lv-sort {
        display: block;
      }
    }

    &:not(.lv-table-column-filters-trigger) {
      &:hover {
        .lv-table-column-sorter-inner {
          .lv-icon-host.lv-table-sorter-presort {
            color: $lv-table-header-sort-icon-color-hover;
          }
        }
      }
    }
  }

  &.lv-table-column-resizing {
    background-color: $lv-table-header-bg-color-hover;
  }
}

.lv-table-th-container {
  align-content: center;

  .lv-icon-host:not(.lv-icon-checked) {
    width: 0.16rem;
    min-width: 0.16rem;
    height: 0.16rem;
    color: $lv-table-header-icon-color;

    &:not(.lv-table-sorter-asc):not(.lv-table-sorter-presort):not(.lv-table-sorter-desc):not(.active):hover {
      color: $lv-table-header-icon-color-hover;
    }

    &.active {
      color: $lv-table-header-icon-color-active;
    }
  }

  lv-tooltip.lv-cell-checkbox-tip {
    height: 0.16rem;
  }

  .lv-table-column-sorter-inner {
    color: $lv-table-header-icon-color;

    .lv-icon-host {
      height: 0.08rem;
    }

    .lv-table-sorter-active {
      color: $lv-table-header-icon-color-active;
    }
  }

  .lv-cell-operation-item {
    flex-shrink: 0;
    margin-left: $margin-xs;
    line-height: 0;
  }

  .lv-cell-custom-operation {
    display: flex;
  }
}

// cell
.lv-table-cell-container {
  display: flex;
  align-items: center;
}

// 排序
.lv-table-column-sorter-inner {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}

// 过滤面板
.lv-cell-default-filter {
  &.lv-popover .lv-popover-inner {
    padding: 0;
    border-radius: $border-radius-md;

    // 适配除默认下拉的过滤场景
    .lv-popover-content {
      > *:not(.lv-filter-select) {
        .lv-input,
        .lv-search {
          width: auto;
        }
      }
    }
  }
}

.lv-filter-select {
  min-width: 1.6rem;
  max-width: 2.72rem;
}

.lv-filter-select-container {
  &:not(.lv-filter-virtual-select-container) .lv-search {
    width: calc(100% - 0.16rem);
    margin: $margin-sm;
  }

  &.lv-filter-virtual-select-container .lv-select-more {
    display: none;
  }

  .lv-filter-select-list {
    max-height: 2.88rem;
    overflow: auto;

    @include scroll-base;
  }

  .lv-filter-select-item {
    display: flex;
    align-items: center;
    min-height: $height-base;
    padding: $padding-xs $padding-sm; // item 高度参照 select，32px
    color: $text-color;
    cursor: pointer;

    &:hover {
      background-color: $lv-table-filter-item-bg-color-hover;
    }

    &.disabled {
      cursor: not-allowed;

      .lv-filter-text {
        color: $text-color-disabled;
      }
    }

    &:not(.lv-filter-select-multiple).selected {
      color: $primary-color;
      background: $lv-table-filter-item-bg-color-active;
    }

    .lv-checkbase {
      margin-right: $margin-sm;
    }
  }

  .lv-filter-text {
    overflow: hidden;
    font-size: $font-size-base;
    line-height: $line-height-base;
  }

  .lv-filter-select-null {
    @include panel-dropdown-empty-style;
  }
}

.lv-filter-select-operation {
  position: relative;
  display: flex;
  justify-content: flex-end;
  padding: $margin-sm $margin-sm $margin-md;

  .lv-button:last-child {
    margin-left: $margin-md;
  }
}

// 分隔符
.lv-table-th-deliver {
  position: absolute;
  top: 0;
  right: 0;
  width: 0.08rem;
  height: 100%;

  &::before {
    position: absolute;
    top: 50%;
    right: 0;
    width: 0.01rem;
    height: calc(100% - 0.16rem);
    background-color: $lv-table-separate-line-bg-color;
    transform: translateY(-50%);
    content: '';

    @include motion-bg;
  }
}

// 表体
.lv-table-tbody {
  > tr {
    &:first-child {
      > td {
        border-top: $border-width-base $border-style-base $lv-table-header-border-color;
      }
    }

    &:first-child.lv-table-row {
      > td {
        padding-top: 0.03rem;
      }
    }

    > td {
      border-bottom: $border-width-base $border-style-base $lv-table-border-color;
    }

    &.lv-table-row {
      > td {
        padding: 0.04rem $padding-sm 0.03rem;
        vertical-align: middle;

        &:first-child {
          padding-left: $padding-md;
        }

        &:last-child {
          padding-right: $padding-md;
        }
      }

      &.lv-table-collapse-row {
        > td {
          &:first-child,
          &:last-child {
            padding: $padding-md;
            border-radius: $border-radius-base;
          }
        }
      }
    }
  }
}

// td
.lv-table-td {
  lv-tooltip.lv-cell-checkbox-tip {
    height: 0.16rem;
    margin-right: $margin-md;

    .lv-cell-checkbox {
      vertical-align: baseline;
    }
  }

  .lv-cell-checkbox {
    vertical-align: middle;
  }
}

.lv-table-td-content {
  flex: 1;
}

.lv-table-cell-content {
  overflow: hidden;
  vertical-align: middle;

  &.lv-table-cell-blank {
    white-space: pre;
  }
}

.lv-table-operation-list {
  a {
    cursor: pointer;

    &:hover,
    &:active,
    &:focus {
      text-decoration: none;
    }

    &:not(:last-child) {
      margin-right: $margin-md;
    }
  }
}

.lv-cell-checkbox + .lv-table-cell-content,
lv-tooltip + .lv-table-cell-content {
  margin-left: $margin-md;
}

.lv-cell-inner-padding {
  display: inline-block;
}

.lv-table-multi-group .lv-table-th-deliver {
  top: 0;
  bottom: 0;
}

.lv-cell-extra-check-origin {
  position: absolute;
  top: 0;
  left: 0;
}

.lv-cell-extra-check {
  margin-top: -0.03rem;
  margin-left: -$margin-xs;

  &.lv-popover {
    .lv-popover-inner {
      padding: $padding-sm $padding-md;
    }
  }
}

// 空数据
.lv-table-null {
  position: sticky;
  left: 0;
  padding: $lv-table-empty-padding 0;
  border-top: $border-width-base $border-style-base $lv-table-header-border-color;
}

// 固定列
.lv-table-sticky-left-cell,
.lv-table-sticky-right-cell {
  position: sticky;
  z-index: 5;
  background-color: $component-background;
}

.lv-table-content {
  position: relative;
}

.lv-table-sticky-box-shadow {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0.08rem;
  box-shadow: $lv-table-box-shadow-light inset;
  transform: translateX(100%);
  content: '';
  pointer-events: none;
}

.lv-table-content-scroll-right,
.lv-table-content-scroll-center {
  .lv-table-sticky-left-cell::after {
    @extend .lv-table-sticky-box-shadow;

    right: 0;
  }
}

.lv-table-content-scroll-left,
.lv-table-content-scroll-center {
  .lv-table-sticky-right-cell::after {
    @extend .lv-table-sticky-box-shadow;

    left: 0;
    rotate: 180deg;
  }

  .lv-table-sticky-right-cell ~ .lv-table-sticky-right-cell {
    box-shadow: none;
  }
}

// 拖拽
.lv-table-th.lv-resizer {
  user-select: none;

  .lv-table-th-deliver {
    cursor: col-resize;
  }

  // 固定列
  &.lv-table-sticky-left-cell,
  &.lv-table-sticky-right-cell {
    .lv-table-th-deliver {
      cursor: default;
    }
  }
}

// resize 辅助线
.lv-table-resize-line {
  position: absolute;
  top: 0;
  left: 100%;
  z-index: 10;
  width: 0;
  height: 100%;
  border-right: $border-width-base $border-style-base $primary-color;
}

// size
.lv-table-small > .lv-table-content {
  > .lv-table-body,
  > .lv-table-scroll > .lv-table-body,
  > .lv-table-scroll > .lv-table-body > .cdk-virtual-scroll-content-wrapper {
    > table > .lv-table-tbody > tr.lv-table-row > td {
      height: $height-base;
    }
  }
}

.lv-table-default > .lv-table-content {
  > .lv-table-body,
  > .lv-table-scroll > .lv-table-body,
  > .lv-table-scroll > .lv-table-body > .cdk-virtual-scroll-content-wrapper {
    > table > .lv-table-tbody > tr.lv-table-row > td {
      height: $height-lg;
    }
  }
}

.lv-table-large > .lv-table-content {
  > .lv-table-body,
  > .lv-table-scroll > .lv-table-body,
  > .lv-table-scroll > .lv-table-body > .cdk-virtual-scroll-content-wrapper {
    > table > .lv-table-tbody > tr.lv-table-row > td {
      height: $height-xl;
    }
  }
}

// 条纹
.lv-table-stripe {
  .lv-table-thead {
    & > tr > th {
      background-color: $component-background;
    }
  }

  .lv-table-tbody {
    .lv-even > td {
      background: $lv-table-stripe-bg-color;
    }

    .lv-odd > td {
      background: $component-background;
    }
  }
}

// 带边框
.lv-table-bordered {
  .lv-table-body {
    border-left: $border-width-base $border-style-base $border-color;
  }

  table {
    th,
    td {
      border-right: $border-width-base $border-style-base $border-color;
      border-bottom: $border-width-base $border-style-base $border-color;
    }

    th .lv-table-th-deliver {
      opacity: 0;
    }
  }

  .lv-table-tbody {
    > tr {
      &:first-child {
        > td {
          border-top: none;
        }
      }
    }
  }

  .lv-table-scroll {
    &.lv-table-vertical-scroll {
      .lv-table-header {
        border-top: $border-width-base $border-style-base $lv-table-header-border-color;
        border-bottom: none;
        border-left: $border-width-base $border-style-base $lv-table-header-border-color;
      }
    }
  }

  .lv-table-null {
    border-top: none;
    border-right: $border-width-base $border-style-base $border-color;
    border-bottom: $border-width-base $border-style-base $border-color;
  }
}

.lv-user-select-disabled {
  user-select: none;
}

.lv-display-none {
  display: none;
}

cdk-virtual-scroll-viewport[hidden] {
  display: none;
}

.lv-treetable {
  .lv-table-thead {
    > tr > th {
      &:first-child:not(.lv-table-column-has-selection) {
        padding-left: $lv-tree-table-first-cell-space;
      }

      &.lv-table-column-has-selection .lv-table-th-deliver {
        display: block;
      }
    }

    .lv-cell-checkbox + .lv-table-cell-content,
    lv-tooltip.lv-cell-checkbox-tip + .lv-table-cell-content {
      margin-left: $lv-tree-table-first-cell-space;
    }
  }

  .lv-table-td:first-child {
    span + .lv-table-cell-content {
      margin-left: $margin-lg;
    }
  }
}
